window.AUI.customCompoents.define("aui-native-select", class extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            changeValue() {
                var self = this;
                // var currentLabel = self.$refs.select.options[self.$refs.select.selectedIndex].text;
                // var computedStyle = window.getComputedStyle(self.$refs.select);
                // self.selectstyle.width = window.AUI.Dom.getWidthOfText(currentLabel, computedStyle["font-family"], computedStyle["font-size"], computedStyle["font-weight"]) + "px";
                self.currentValue = self.$refs.select.options[self.$refs.select.selectedIndex].text;
            },
            changeSelect(e) {
                var self = this;
                this.changeValue();
                self.selectstyle["z-index"] = -1;
                setTimeout(function () {
                    self.selectstyle["z-index"] = 1;
                }, 300);
            },
            handleTrigger(e) {
                this.$refs.select.dispatchEvent(new Event("change"));
            }
        }
    }
    _template() {
        var self = this;
        return `
<div class="${self._name}">
<select ref="select" :id="id" :style="selectstyle" @change="changeSelect">
<slot></slot>
</select>
<label class="${self._name}__inner">
<span>{{currentValue}}</span>
<span class="caret"></span>
</label>
</div>         
`
    }
    _data() {
        var ret = {};
        ret.id = window.AUI.Utils.uniqueSelector("select_");
        ret.selectstyle = {
            "z-index": "1"
        };
        ret.currentValue = "";
        return ret;
    }
    _mounted() {
        var self = this;
        self.changeValue();
    }
});